<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<link rel="stylesheet" href="static/logo.css">
<link rel="stylesheet" href="static/blog.css">
<link rel="stylesheet" href="static/end.css">
<script type="text/javascript" src="js/tp.js"></script>




</head>
<body>
    <div id="home" >
	<div class="top">
		<span class="a"><a href="blog.jsp"><img src="img/logo.png" height="120" width="190"></a></span>
			<ul class="top-1">
			<li><a href="blog.jsp">个人博客</a></li>
			<li><a href="message.jsp">留言</a></li>
			<li><a href="login.jsp">登录</a></li>
			<li><a href="register.jsp">注册登录</a></li>
			<li><a href="aboutMe.jsp">关于我</a></li>
			<li align="left"class="a2">欢迎你浏览小源博客！</li>
		</ul>
	</div>
	
	 <div id="tp">
	 <ul id="play">
	 	<li style="display: block;"><img src="img/blog/1.jpg"  width=960px;height=520px; /></li>
	 	<li><img src="img/blog/2.jpg" width=950px;height=520px; /></li>
	 	<li><img src="img/blog/3.jpg" width=950px;height=520px; /></li>
	 	<li><img src="img/blog/4.jpg"  width=950px;height=520px;/></li>
	 	<li><img src="img/blog/5.jpg" width=950px;height=520px; /></li>
	 	<li><img src="img/blog/6.jpg"  width=950px;height=520px; /></li>
	 	<li><img src="img/blog/7.jpg" width=950px;height=520px;/></li>
	 	<li><img src="img/blog/8.jpg" width=950px;height=520px; /></li>
	 </ul>
	 <ul id="button">
	 	<li><div style="background: #A10000;"></div></li>
	 	<li><div></div></li>
	 	<li><div></div></li>
	 	<li><div></div></li>
	 	<li><div></div></li>
	 	<li><div></div></li>
	 	<li><div></div></li>
	 	<li><div></div></li>
	 </ul>
 </div>
	   <div class="top-left">
	        <p style="text-align: center"><img src="img/blog/hand.jpg"width=120px;height=120px;></p>
	        <ul class="left">
	          <li>姓名：小源</li>
	          <li>学校：广州现代信息工程职业技术学院</li>
	          <li>QQ:：1234644644</li>
	          <li>微信：131516546</li>
	          <li>邮箱：12346448486@qq.com</li>
	          <li>目标：<br>
	              <span>小目标：尽力做好每一件事情</span><br>
	              <span>大目标：赚它一个亿</span><br>
	          </li>
	          <li>人生哲理：<br>
	          	选择时尽心，行动时尽力，坚持时无怨，结束时无悔。凡事若能尽心尽力，人生便可无怨无悔。
	          	</li>
	        </ul>
	   </div>
	   <div class="centre">
	        <p class="plan">暑假计划</p>
	        <div class="centre-1">
	          <p style="text-align: center ;font-size:25px; color:cornflowerblue;"><strong>学习</strong></p>
	          <p class="cen"><a href="#">复习Java知识</a></p>
	          <p class="cen"><a href="#">整理笔记，发博客</a></p>
	          <p class="cen"><a href="#">学习计划知识</a></p>
	          <p class="cen"><a href="#">看学习视频</a></p>
	           <p class="cen"><a href="#">了解新知识</a></p>
	        </div>
	         <div class="centre-1">
	         <p style="text-align: center ;font-size:25px; color:cornflowerblue;"><strong>陪家人</strong></p>
	         <p class="cen"><a href="#">陪家人聊天</a></p>
	          <p class="cen"><a href="#">与家人去旅游</a></p>
	          <p class="cen"><a href="#">帮忙家里人干活</a></p>
	          <p class="cen"><a href="#">陪奶奶</a></p>
	           <p class="cen"><a href="#">全家运动</a></p>
	        </div >
	         <div class="centre-1">
	          <p style="text-align:center;font-size:25px;color:cornflowerblue;"><strong>娱乐</strong></p>
	         <p class="cen"><a href="#">爬山</a></p>
	          <p class="cen"><a href="#">与朋友聚会</a></p>
	          <p class="cen"><a href="#">唱歌，KTV走起！</a></p>
	          <p class="cen"><a href="#">与朋友一次去看海！</a></p>
	           <p class="cen"><a href="#">与朋友进行一次说走就走的旅行！</a></p>
	        </div>
	   </div>
	 <div class="content">
	  <div class="content-left">
	     <p style="font-size:20px;color:cornflowerblue; margin-left:10px">文章推荐</p>
	       <div class="content-left-1">
	          <c:forEach items="${list}" var="article" varStatus="vs">
	          	  <article>
	          	     <div class="img">
	          	          <img src="img/blog/wp.jpg"width=250px; height=150px;>

	          	     </div>
	          	       <figure>
         			<figcaption>
         			  <div class="cont">
         			        <h3 style="color:#87CEEB ;font-size:20px;"><a herf="post?id=${ article.artId}">${article.artTitle}</a></h3>
         			        <h5 ><span style="font-size:18px;">后端文章</span> <button class="cont-1">new</button></h5>
                  <p class="ok">
                    ${article.author}
                    ${article.artDate}
                   </p>
                    <p class="ok">日志记录是软件开发中的一个重要主题，特别是当您需要分析生产环境中的bug和其他意外事件时。</p>
                    <p class="ok">实现日志记录通常很简单。但正如你可能经历过的，日志要比看起来复杂得多。</p>
                  <span class="xs"><a href="post?id=${article.artId}">详细</a></span>
         			  </div>
	          	  </article>
	          	 </figcaption>
         </figure>
	          	</c:forEach>
	       </div>
	   </div>
	 <div class="content-right">
	     <table class="day" border="0" width="365" height="80" cellpadding="0" cellspacing="0">
			<tr>
					<td align="center" ><strong><</strong></td>
					<td colspan="5" align="center"><strong>9月 2019</strong></td>
					<td align="center"><b>></b></td>
			</tr>
			<tr>
					<td align="center" width="20" ><b>日</td>
					<td align="center" width="20" ><b>一</b></td>
					<td align="center" width="20" ><b>二</b></td>
					<td align="center" width="20" ><b>三</b></td>
					<td align="center" width="20" ><b>四</b></td>
					<td align="center" width="20" ><b>五</b></td>
					<td align="center" width="20"><b>六</b></td>
			</tr>
		</table>
		<table  class="day-1" border="1" width="365" height="240" cellpadding="0" cellspacing="0">
			<tr>
				<td align="center"><b>1</b></td>
				<td align="center" style="color: red;"><b>2</b></td>
				<td align="center"><b>3</b></td>
				<td align="center" ><b>4</b></td>
				<td align="center"><b>5</b></td>
				<td align="center"><b>6</b></td>
				<td align="center"><b>7</b></td>
			</tr>
			<tr>
				<td align="center"><b>8</b></td>
				<td align="center"><b>9</b></td>
				<td align="center" ><b>10</b></td>
				<td align="center"><b>11</b></td>
				<td align="center"><b>12</b></td>
				<td align="center"><b>13</b></td>
				<td align="center"><b>14</b></td>
			</tr>
			<tr>
				<td align="center"><b>14</b></td>
				<td align="center"><b>15</b></td>
				<td align="center"><b>16</b></td>
				<td align="center"><b>17</b></td>
				<td align="center"><b>18</b></td>
				<td align="center"><b>19</b></td>
				<td align="center"><b>20</b></td>
			</tr>
			<tr>
				<td align="center"><b>21</b></td>
				<td align="center"><b>22</b></td>
				<td align="center"><b>23</b></td>
				<td align="center"><b>24</b></td>
				<td align="center"><b>25</b></td>
				<td align="center"><b>26</b></td>
				<td align="center"><b>27</b></td>
			</tr>
			<tr>
				<td align="center"><b>28</b></td>
				<td align="center"><b>29</b></td>
				<td align="center"><b>30</b></td>
				<td align="center"style="background-color: lightgray;"><b>1</b></td>
				<td align="center" style="background-color: lightgray;"><b>2</b></td>
				<td align="center"style="background-color: lightgray;" ><b>3</b></td>
				<td align="center" style="background-color: lightgray;"><b>4</b></td>
			</tr>
		</table>
		  
          <div class="content-right-1">
               <p>hot！热门标签</p>
          </div>
          
				<div>
				   <ul class="right-1">
                    <li><a>css</a></li>
                 	<li><a>js</a></li>
                 	<li><a>jq</a></li>
                 	<li><a>Java</a></li>
                 	<li><a>MYSQL</a></li>
                 	<li><a>JavaWeb</a></li>
                 	<li><a>博客</a></li>
                 	<li><a>小源</a></li>
                 	<li><a>相册</a></li>
                 	<li><a>留言</a></li>
                 	<li><a>学习</a></li>
                 	<li><a>Html</a></li>
                 	<li><a>三层架构</a></li>
                 </ul>
				</div>
				
				<div class="right-2">
				   <p class="content-right-1">热点新闻:</p>
				    <ul class="rig">
				      <li><a href="#">1.“天价”学生宿舍收费问题是市场行为还是变相涨价?</a></li>
				      <li><a href="#">2.范哲思们排队道歉,对不起,中国人不是傻子</a></li>
				      <li><a href="#">3.国务院总理李克强主持召开国务院常务会议，决定在自由贸易试验区开展“证照分离”改革全覆盖试点，
				      	部署扩大养老服务供给促进养老服务消费，确定稳定生猪生产和猪肉保供稳价措施。</a></li>
				      <li><a href="#">4..2019年8月21日，第26届北京国际图书博览会暨第17届北京国际图书节京开幕  。</a></li>

				    </ul>
				</div>
				<div  class="right-3">
				   <p class="content-right-1">狂热留言:</p>
				   <div class="rig-top">
				     <div class="rig-1">
				     <img src="img/blog/lytp.jpg" width=115px; height=70px>
				    </div>
				     <div class="rig-2">
				           <p>小曹</p>
				            <p>文章不错！继续加油</p> 
				            <p>留言:</p>
				            <p><a href="#">生命力的意义在于拚搏，因为世界本身就是一个竞技场。</a></p>
				            
				     </div>
				       </div>
				          
				          <div class="rig-top">
				     <div class="rig-1">
				     <img src="img/blog/lytp.jpg" width=115px; height=70px>
				    </div>
				     <div class="rig-2">
				           <p>小曹</p>
				            <p>文章不错！继续加油</p> 
				            <p>留言:</p>
				            <p><a href="#">生命力的意义在于拚搏，因为世界本身就是一个竞技场。</a></p>
				            
				     </div>
				       </div>
				       
				       <div class="rig-top">
				     <div class="rig-1">
				     <img src="img/blog/lytp.jpg" width=115px; height=70px>
				    </div>
				     <div class="rig-2">
				           <p>小曹</p>
				            <p>文章不错！继续加油</p> 
				            <p>留言:</p>
				            <p><a href="#">生命力的意义在于拚搏，因为世界本身就是一个竞技场。</a></p>
				            
				     </div>
				       </div>  
				          
				     
				     
				     
				</div>
				<div  class="right-4">
				   <p class="content-right-1">精彩评论</p>
				     <div class="rig-pl">
				         <p>小夏</p>
				         <p>评论：文章效果极佳，继续加油！</p>
				     </div>
				     
				     <div class="rig-pl">
				         <p>小夏</p>
				         <p>评论：文章效果极佳，继续加油！</p>
				     </div>
				     
				     <div class="rig-pl">
				         <p>小夏</p>
				         <p>评论：文章效果极佳，继续加油！</p>
				     </div>
				     
				       <div class="rig-pl">
				         <p>小夏</p>
				         <p>评论：文章效果极佳，继续加油！</p>
				     </div>
				     
				       <div class="rig-pl">
				         <p>小夏</p>
				         <p>评论：文章效果极佳，继续加油！</p>
				     </div>
				</div>
	   </div>
	    
	   </div>
	
	
	 <div class="end">
    <div>
        <p>博客热线：221555555 <span>法务部邮箱：DDDER@cnr.cn</span></p>
        <p class="end-2">公众号：125546 </p>
        <p class="end-3">
            <span>电子邮箱：1251531355@cnr.cn</span>
            <span>违法和不良信息举报电话：1344646433</span> 中国互联网举报中心
            <span class="end-2">关注号：1155664 </span><span> </span>
        </p>
        <p class="end-2">建议邮箱:156146@132.com</p>
        <p class="end-3">
            |<a href="#">小源简介</a>|
            <a href="#">版权声明</a>|
            <a href="#">在线咨询</a>|
            <a href="#">法律声明</a>|
            <a href="#">服务电话</a>|
            <a href="#">广告服务</a>|
        </p>
        <p class="img-1">
            <span>关注码：</span>
            <span><img src="img/er.jpg"width=110px height=100px/></span>

        </p>
      
    </div>
	</div>
	</div>
	
</body>
</html>